<template>
  <a-modal
    title="选择用户"
    width="60%"
    :visible="visible"
    :confirmLoading="confirmLoading"
    :maskClosable="false"
    @cancel="handleCancel"
    cancelText="关闭"
    okText="确定"
    @ok="handleOk"
    style="top:20px;"
  >
    <a-spin :spinning="confirmLoading">
      <a-form-model ref="form" :rules="validatorRules" :model="model" layout="vertical">
        <a-tabs default-active-key="1" @change="tabClick">
          <a-tab-pane tab="选择用户" key="1">
            <a-form-model-item label="审批用户" prop="auditUsers">
              <a-select showSearch :filterOption="filterOption" v-if="!multiple" v-model="model.auditUsers" placeholder="请选择审批用户">
                <a-select-option v-for="(item,index) in userList" :value="item.username" :key="index">
                  {{item.realname}}({{item.username}})
                </a-select-option>
              </a-select>
              <a-select v-if="multiple" mode="multiple" v-model="model.auditUsers" placeholder="请选择审批用户">
                <a-select-option showSearch :filterOption="filterOption" v-for="(item,index) in userList" :value="item.username" :key="index">
                  {{item.realname}}({{item.username}})
                </a-select-option>
              </a-select>
            </a-form-model-item>
          </a-tab-pane>
          <a-tab-pane tab="选择表达式" key="2">
            <a-form-model-item label="表达式" prop="express">
              <a-select v-model="model.express" placeholder="请选择表达式">
                <a-select-option v-for="(item,index) in userExpressList" :value="item.expression" :key="index">
                  {{item.name}}({{item.expression}})
                </a-select-option>
              </a-select>
            </a-form-model-item>
          </a-tab-pane>
        </a-tabs>
      </a-form-model>
    </a-spin>
  </a-modal>
</template>

<script>
  import { getAction } from '../../../../api/manage'

  export default {
    name: 'UserSelectModal',
    data() {
      return {
        visible: false,
        confirmLoading: false,
        model: {},
        userExpressList:[],
        userList:[],
        multiple: false,
        key: '1',
        validatorRules: {
          auditUsers: [{ validator: this.validateAuditUsers }],
          express: [{ validator: this.validateAuditExpress }]
        },
        url:{
          getUserList:'/process/extActProcess/queryAuditUserList',
          getUserExpressList:'/process/extActExpression/queryUserExpressList',
        }
      }
    },
    created(){

    },
    methods: {
      initDictConfig(){
          getAction(this.url.getUserList,{}).then(res => {
            if(res.success){
              this.userList = res.result;
            }
          });
          getAction(this.url.getUserExpressList,{}).then(res => {
            if(res.success){
              this.userExpressList = res.result;
            }
          });
      },
      validateAuditUsers(rule, value, callback) {
        if (this.key == '1' && !value) {
          callback('请选择审批用户')
        } else {
          callback()
        }
      },
      validateAuditExpress(rule, value, callback) {
        if (this.key == '2' && !value) {
          callback('请选择表达式')
        } else {
          callback()
        }
      },
      show(multiple) {
        this.initDictConfig();
        this.visible = true
        this.multiple = multiple
        this.$nextTick(() => {
          this.$refs.form.resetFields()
          this.model = Object.assign({}, {})
        })
      },
      tabClick(key) {
        this.key = key
      },
      handleCancel() {
        this.visible = false
      },
      filterOption(input, option) {
        return (option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0)
      },
      handleOk() {
        const that = this
        // 触发表单验证
        this.$refs.form.validate((ok, err) => {
          if (ok) {
            let selectUsers
            if (that.key == '1') {
              if (that.model.auditUsers instanceof Array) {
                selectUsers = that.model.auditUsers.join(',')
              } else {
                selectUsers = that.model.auditUsers
              }
            } else {
              selectUsers = this.model.express
            }
            that.$emit('selectUser', selectUsers)
            that.visible = false
          }
        })
      }
    }
  }
</script>

<style scoped>

</style>